<template>
  <div class="query-table">
    <show-table
      :dataList="dataList"
      :tableConfig="tableConfig"
      :isShowSelectCol="isShowSelectCol"
      :listCount="totalCount"
      :pageInfo="paginationInfo"
      :tableHeight="tableHeight"
      :treeTableConfig="treeTableConfig"
      :isShowPagination="isShowPagination"
      @sizeChange="pageSizeChange"
      @currentChange="currentPageChange"
    >
      <template v-if="createPer" #tableHeader>
        <el-button type="primary" icon="CirclePlus" plain @click="newBtnClick"
          >新建</el-button
        >
      </template>
      <template v-for="item in slotCol" :key="item.label" #[item.prop]="scope">
        <slot v-if="item.prop !== 'handle'" :name="item.prop" :row="scope.row">
          {{ scope.row[item.prop] }}
        </slot>
      </template>
      <template #handle="scope">
        <el-button
          type="primary"
          size="small"
          icon="Edit"
          text
          @click="editBtnClick(scope.row)"
          >编辑</el-button
        >
        <el-button
          type="primary"
          size="small"
          icon="Delete"
          text
          @click="deleteBtnClick(scope.row)"
          >删除</el-button
        >
      </template>
    </show-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, computed, ref, watch } from "vue";
import ShowTable from "@/components/show-table";
import { useStore } from "@/store";
import {
  IShowTableConfigType,
  ITreeTableConfigType
} from "@/components/show-table/type/type";
import { usePermissionHoos } from "@/hooks/usePermission";
import { useDeleteRowHook } from "@/hooks/useHandleTable";

export default defineComponent({
  components: {
    ShowTable
  },
  emits: ["newBtnClick", "editBtnClick"],
  props: {
    tableConfig: {
      type: Array as PropType<IShowTableConfigType[]>,
      require: true
    },
    pageName: {
      type: String,
      require: true
    },
    tableHeight: {
      type: String,
      default: ""
    },
    isShowSelectCol: {
      type: Boolean,
      default: true
    },
    treeTableConfig: {
      type: Object as PropType<ITreeTableConfigType>,
      default: () => ({})
    },
    isShowPagination: {
      type: Boolean,
      default: true
    }
  },
  setup(props, { emit }) {
    const store = useStore();
    // 动态插槽
    const slotCol = props.tableConfig?.filter((item) => item.prop !== "handle");
    // 分页器信息
    const paginationInfo = ref({ offset: 0, size: 10 });
    // 是否具有新建权限
    const createPer = usePermissionHoos(props.pageName as string, "create");
    // 是否具有查询权限
    const queryPer = usePermissionHoos(props.pageName as string, "query");
    // 请求表格数据
    const getTableData = (queryParams: any = {}) => {
      // 如果没有查询权限，停止发送网络请求
      if (!queryPer) return;
      store.dispatch("system/getPageListAction", {
        pageName: props.pageName,
        queryInfo: {
          offset: paginationInfo.value.offset * paginationInfo.value.size,
          size: paginationInfo.value.size,
          ...queryParams
        }
      });
    };
    // 页面初次加载，请求数据
    getTableData();
    // 监听分页器信息的改变，刷新列表
    watch(paginationInfo, () => getTableData(), { deep: true });
    // 表格展示的数据
    const dataList = computed(() =>
      store.getters["system/pageTableDataGetter"](props.pageName)
    );
    // 数据总数
    const totalCount = computed(() =>
      store.getters["system/pageTableCountGetter"](props.pageName)
    );
    // 监听分页器每页条数的改变
    const pageSizeChange = (size: number) => {
      paginationInfo.value.size = size;
    };
    // 监听分页器页号的改变
    const currentPageChange = (pageNum: number) => {
      paginationInfo.value.offset = pageNum - 1;
    };
    // 新建
    const newBtnClick = () => {
      emit("newBtnClick");
    };
    // 编辑
    const editBtnClick = (row: any) => {
      emit("editBtnClick", row);
    };
    // 删除
    const deleteBtnClick = (row: any) => {
      useDeleteRowHook(props.pageName as string, row.id, getTableData);
    };
    return {
      dataList,
      getTableData,
      totalCount,
      paginationInfo,
      pageSizeChange,
      currentPageChange,
      createPer,
      newBtnClick,
      slotCol,
      editBtnClick,
      deleteBtnClick
    };
  }
});
</script>

<style scoped></style>
